<template>
    <div>
        <panle content="活码平台" title='预分配助教的前置平台'></panle>
        <div class="searchbar">
            <el-row class="pt20">
                <el-col :span="12">
                    <el-button size="mini" @click="init()">刷新</el-button>
                    <pers-button icon="el-icon-edit" label="添加" perms="looseCode:loose:set" size="mini" type="primary" @click="add()"></pers-button>
                    <!--<pers-button type="danger" size="mini" icon="el-icon-delete" @click="delAll()" perms="looseCode:loose:batch_del" label="批量删除"></pers-button>-->
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">

                        <el-form-item label="">
                            <el-input v-model="formInline.title" size="mini" placeholder="请输入平台名称"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" size="mini" @click="serach">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </div>

        <el-table v-loading="loading" :data="tableData" border default-expand-all row-key="id" stripe
                  style="width: 100%;margin-bottom: 20px;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>1
            <el-table-column label="ID" prop="id" width="55"></el-table-column>
            <el-table-column label="平台名称" prop="title"></el-table-column>
            <el-table-column label="企微标签" prop="tag_id"></el-table-column>
            <el-table-column label="订单平台" prop="pingtai_id">
                <template slot-scope="scope">
                    <el-select size="mini" v-model="scope.row.pingtai_id">
                        <el-option
                            v-for="item in platformSelection"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column v-if="isShow(['looseCode:loose:set','looseCode:loose:del'])" label="操作" prop="id">
                <template slot-scope="scope">
                    <PersButton icon="fa fa-pencil" label="编辑" perms="looseCode:loose:set" size="mini" type="text"
                                @click="editLoose(scope.row)"></PersButton>
                    <PersButton icon="el-icon-delete" label="删除" perms="looseCode:loose:del" size="mini" type="text"
                                @click="delLoose(scope.row)"></PersButton>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">

            <el-pagination :current-page="pageNumber" :page-size="pageSize"
                           :page-sizes="[10, 50, 100, 200]"
                           :total="total" background layout="total, sizes, prev, pager, next, jumper"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <el-dialog :title="!form.id ? '新增平台' : '修改平台'" :visible.sync="open" append-to-body width="600px">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>


                    <el-col :span="24">
                        <el-form-item label="平台名称" prop="title">
                            <el-input v-model="form.title" placeholder="请输入平台名称" size="small"/>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="企微标签" prop="tag_id">
                            <el-input v-model="form.tag_id" placeholder="请输入代表平台的企微标签ID" size="small"/>
                            <!-- <el-select v-model="form.tag_id" size="small" clearable placeholder="请选择企业标签">
                                <el-option
                                    v-for="item in tabSelection"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="订单平台" prop="pingtai_id">
                            <el-select v-model="form.pingtai_id" size="small" clearable placeholder="请选择订单平台">
                                <el-option
                                    v-for="item in platformSelection"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="open = false">取 消</el-button>
                <el-button size="small" type="primary"
                           @click="!form.id ? submitForm('form') : subEditForm('form') ">确 定
                </el-button>
            </div>

        </el-dialog>


    </div>
</template>

<script>
import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {setLoose, delLoose, getLooseList, getSelectPlatform} from '@/api/scrm/looseCode/looseCode';
import {getMenuList} from '@/api/system/menu';
import {hasPermission, isShow} from '@/common/permission';

export default {
    components: {
        Panle,
        PersButton
    },
    data() {
        return {
            loading: false,
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0, //总页数
            tableData: [],
            serachword: '',
            formInline: {},
            open: false,
            form: {
                id: '',
                title: '',
                pingtai_id: '',
                tag_id: ''
            },
            rules: {
                title: [{
                    required: true,
                    message: "平台名称不能为空",
                    trigger: "blur"
                }],
                pingtai_id: [{
                    required: true,
                    message: "订单来源平台ID不能为空",
                    trigger: "blur"
                }],
                tag_id: [{
                    required: true,
                    message: "订单来源企微标签ID不能为空",
                    trigger: "blur"
                }]
            },
            props: {
                // 配置项（必选）
                value: "id",
                label: "name",
                children: "children"

            },
            platformSelection: [],
            tabSelection: [],
            multipleSelection: []
        }
    },
    created() {
        this.init();
    },
    methods: {
        hasPermission,
        isShow,
        init: function () {
            this.loading = true;
            let param = {
                "pageSize": this.pageSize,
                "pageNumber": this.pageNumber
            }
            if (this.serachword) {
                param.map = {
                    title: this.serachword
                }
            }
            getLooseList(param).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                    this.loading = false;
                }
            })
            getSelectPlatform().then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.platformSelection = res.data;
                }
            })

        },
        serach: function () {
            this.serachword = this.formInline.title;
            this.init();
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.pageNumber = e;
            this.init();
        },
        handleSelectionChange: function (e) {
            console.log(e);
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.role_id)

            }
            this.multipleSelection = selectChang;
            console.log(selectChang);
        },
        add: function () {
            this.form = {
                id: '',
                title: '',
                pingtai_id: '',
                tag_id: ''
            };
            this.open = true;
        },
        submitForm: function (data) {
            this.$refs[data].validate((valid) => {
                if (valid) {
                    setLoose(this.form).then((res) => {
                        console.log(res)
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open = false;
                        } else {
                            this.msgError(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            })
        },
        delLoose: function (data) {
            this.$confirm('确定删除【' + data.title + '】此平台', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                delLoose(data.id).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init();
                    } else {
                        this.msgError(res.msg);
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        editLoose: function (data) {
            let editForm ={
                "id":data.id,
                "title":data.title,
                "pingtai_id":data.pingtai_id,
                "tag_id":data.tag_id
            }
            Object.assign(this.form,editForm);
            this.open = true;
        },
        subEditForm: function (data) {

            this.$refs[data].validate((valid) => {
                if (valid) {
                    setLoose(this.form).then((res) => {
                        if (res.code == 200) {
                            this.msgSuccess(res.msg);
                            this.init();
                            this.open = false;

                        } else {
                            this.msgError(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            })

        },
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

.demo-form-inline {
    .el-form-item {
        margin-bottom: 0;
    }
}

.el-tree {
    max-height: 200px;
    overflow: auto;
    background: #f7f7f7;
}

.el-tree-node__label,
.el-textarea__inner {
    font-size: 12px;
}

.groupmenu .el-tree-node__children .el-tree-node__children .el-tree-node__children .el-tree-node__content {
    float: left;
    width: 100px;
}

.el-checkbox__label {
    font-size: 12px !important;
}

</style>
